<template>
  <div class="container">
    <el-header class="header">
      <el-button class="back" @click="goBack">
        <el-icon>
          <ArrowLeft />
        </el-icon>
      </el-button>
      <span class="title">公告</span>
    </el-header>

    <el-main class="main-content">
      <div v-if="loading" class="loading">加载中...</div>
      <div v-else-if="notice" class="notice-detail">
        <h1 class="notice-title">{{ notice.title }}</h1>
        <div class="notice-content-box">
          <pre class="notice-content">{{ notice.content }}</pre>
        </div>
        <div class="notice-footer">
          <div class="notice-meta">
            <div class="notice-dept">发布部门：{{ deptName }}</div>
            <div class="notice-time">{{ formatTime(notice.publishTime) }}</div>
          </div>
        </div>
      </div>
      <div v-else class="no-data">公告不存在</div>

    </el-main>
  </div>
</template>
  
  <script>
import { ref, onMounted } from "vue";
import { useRoute, useRouter } from "vue-router";
import { ArrowLeft } from "@element-plus/icons-vue";
import { viewNoticeContent } from "../../api/notice.js";
import { getDeptNameById } from "../../api/dept.js";

export default {
  setup() {
    const route = useRoute();
    const router = useRouter();
    const notice = ref(null);
    const deptName = ref("");
    const loading = ref(false);

    const goBack = () => {
      router.push("/betch");
    };

    const formatTime = (time) => {
      if (!time) return "";
      return new Date(time).toLocaleString();
    };

    // 获取部门名称
    const fetchDeptName = async (deptId) => {
      try {
        const res = await getDeptNameById({ deptId });
        if (res.flag) {
          deptName.value = res.result;
        } else {
          deptName.value = "未知部门";
        }
      } catch (error) {
        console.error("获取部门名称失败:", error);
        deptName.value = "未知部门";
      }
    };

    const fetchNotice = async () => {
      const id = route.query.id;
      if (!id) return;

      loading.value = true;
      try {
        const res = await viewNoticeContent({ id });
        if (res.flag) {
          notice.value = res.result;
          // 获取部门名称
          await fetchDeptName(notice.value.deptId);
        }
      } catch (error) {
        console.error("获取公告详情失败:", error);
      } finally {
        loading.value = false;
      }
    };

    onMounted(() => {
      fetchNotice();
    });

    return {
      notice,
      deptName,
      loading,
      goBack,
      formatTime,
    };
  },
};
</script>
  
  <style scoped>
.container {
  height: 100vh;
  width: 100vw;
  background-color: #e1efff;
  overflow-x: hidden;
  position: relative;
}

.header {
  height: 8vh;
  width: 100%;
  background-color: white;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 1000;
}

.main-content {
  padding-top: 8vh;
  overflow-y: auto;
}

.back {
  position: absolute;
  left: 20px;
  top: 50%;
  transform: translateY(-50%);
  border: none;
  font-size: 24px;
  background: transparent;
}

.notice-detail {
  background-color: white;
  margin: 20px;
  border-radius: 12px;
  padding: 24px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
}

.notice-title {
  color: #1a1a1a;
  font-size: 22px;
  font-weight: bold;
  text-align: center;
  margin-bottom: 24px;
  padding-bottom: 16px;
  border-bottom: 1px solid #f0f0f0;
}

.notice-content-box {
  padding: 0 10px;
  margin-bottom: 24px;
}

.notice-content {
  font-size: 16px;
  line-height: 1.8;
  color: #333;
  white-space: pre-wrap;
  word-wrap: break-word;
  font-family: "PingFang SC", "Microsoft YaHei", sans-serif;
  margin: 0;
}

.notice-footer {
  padding-top: 16px;
  border-top: 1px solid #f0f0f0;
}

.notice-meta {
  display: flex;
  flex-direction: column;
  gap: 8px;
  color: #666;
  font-size: 14px;
}

.notice-dept {
  color: #409eff;
  font-weight: 500;
}

.notice-time {
  color: #999;
}

.loading,
.no-data {
  text-align: center;
  padding: 50px;
  color: #909399;
  font-size: 16px;
}
</style>